<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Action Sheet - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
  <script type="module">
    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
    window.actionSheetController = actionSheetController;
  </script>

<body>
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>Action Sheet - Basic</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
      <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
      <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
      <ion-button expand="block" id="custom" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
      <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
      <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
      <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
      <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
      <ion-button expand="block" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">Custom Backdrop Opacity</ion-button>
    </ion-content>

  </ion-app>

  <style>
    .my-color-class {
      --background: #292929;
      --button-background-selected: #222222;

      --color: #dfdfdf;
      --button-color: #dfdfdf;
    }

    .my-custom-class {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 40px;

      --max-width: 300px;
      --height: 325px;
    }

    .custom-backdrop {
      --ion-backdrop-opacity: 1;
    }

  </style>
  <script>
    window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
    async function openActionSheet(opts) {
      const actionSheet = await actionSheetController.create(opts);
      await actionSheet.present();
    }

    async function presentBasic() {
      const mode = Ionic.mode;
      await openActionSheet({
        header: "Albums",
        buttons: [{
          text: 'Delete',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Delete clicked');
          }
        }, {
          text: 'Share',
          icon: 'share',
          cssClass: 'ion-activated',
          handler: () => {
            console.log('Share clicked');
          }
        }, {
          text: 'Play (open modal)',
          icon: 'chevron-forward-circle',
          handler: () => {
            console.log('Play clicked');
          }
        }, {
          text: 'Favorite',
          icon: mode === 'md' ? 'heart' : null,
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Cancel',
          icon: mode === 'md' ? 'close' : null,
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }]
      });
    }

    async function presentAlert() {
      await openActionSheet({
        buttons: [{
          text: 'Open Alert',
          handler: async () => {
            const alert = Object.assign(document.createElement('ion-alert'), {
              header: 'Alert from Action Sheet',
              subHeader: 'Subtitle',
              message: 'This is an alert message.',
              buttons: [{
                text: 'Okay',
                handler: async () => {
                  await actionSheetController.dismiss();
                  return false;
                }
              }]
            });
            document.body.appendChild(alert);
            await alert.present();
            return false;
          }
        }, {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }]
      });
    }

    async function presentCancelOnly() {
      await openActionSheet({
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel', // will always sort to be on the bottom
            handler: () => {
              console.log('Cancel clicked');
            }
          }
        ]
      });
    }

    async function presentWithCssClass(classList) {
      await openActionSheet({
        header: "Custom Css Class",
        cssClass: classList ? classList : "my-color-class my-custom-class",
        buttons: [
          {
            text: 'Add to Favorites',
            icon: 'star',
            cssClass: 'my-custom-button customClass ion-activated',
            handler: () => {
              console.log('Add to Favorites clicked');
            }
          },
          {
            text: 'Duplicate',
            icon: 'copy',
            handler: () => {
              console.log('Duplicate clicked');
            }
          },
          {
            text: 'Move to Album',
            icon: 'move',
            handler: () => {
              console.log('Move to Album clicked');
            }
          },
          {
            text: 'Delete',
            icon: 'trash',
            role: 'destructive',
            handler: () => {
              console.log('Delete clicked');
            }
          },
          {
            text: 'Cancel',
            role: 'cancel', // will always sort to be on the bottom
            handler: () => {
              console.log('Delete clicked');
            }
          }
        ]
      });
    }

    async function presentIcons() {
      await openActionSheet({
        header: "Albums",
        buttons: [{
          text: 'Delete',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Delete clicked');
          }
        }, {
          text: 'Share',
          icon: 'share',
          handler: () => {
            console.log('Share clicked');
          }
        }, {
          text: 'Play (open modal)',
          icon: 'chevron-forward-circle',
          handler: () => {
            console.log('Play clicked');
          }
        }, {
          text: 'Favorite',
          icon: 'heart',
          role: 'selected',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Cancel',
          role: 'cancel',
          icon: 'close',
          handler: () => {
            console.log('Cancel clicked');
          }
        }]
      });
    }

    async function presentNoBackdropDismiss() {
      await openActionSheet({
        backdropDismiss: false,
        buttons: [{
          text: 'Archive',
          handler: () => {
            console.log('Archive clicked');
          }
        }, {
          text: 'Destructive',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        }, {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }]
      });
    }

    async function presentScroll() {
      await openActionSheet({
        buttons: [
          {
            text: 'Add Reaction',
            handler: () => {
              console.log('Add Reaction clicked');
            }
          }, {
            text: 'Copy Text',
            cssClass: 'ion-activated',
            handler: () => {
              console.log('Copy Text clicked');
            }
          }, {
            text: 'Share Text',
            handler: () => {
              console.log('Share Text clicked');
            }
          }, {
            text: 'Copy Link to Message',
            handler: () => {
              console.log('Copy Link to Message clicked');
            }
          }, {
            text: 'Remind Me',
            handler: () => {
              console.log('Remind Me clicked');
            }
          }, {
            text: 'Pin File',
            handler: () => {
              console.log('Pin File clicked');
            }
          }, {
            text: 'Star File',
            handler: () => {
              console.log('Star File clicked');
            }
          }, {
            text: 'Mark Unread',
            handler: () => {
              console.log('Mark Unread clicked');
            }
          }, {
            text: 'Mark Read',
            handler: () => {
              console.log('Mark Read clicked');
            }
          }, {
            text: 'Edit Title',
            handler: () => {
              console.log('Edit Title clicked');
            }
          }, {
            text: 'Erase Title',
            handler: () => {
              console.log('Erase Title clicked');
            }
          }, {
            text: 'Save Image',
            handler: () => {
              console.log('Save Image clicked');
            }
          }, {
            text: 'Copy Image',
            handler: () => {
              console.log('Copy Image clicked');
            }
          }, {
            text: 'Erase Image',
            handler: () => {
              console.log('Erase Image clicked');
            }
          }, {
            text: 'Delete File',
            role: 'destructive',
            handler: () => {
              console.log('Delete File clicked');
            }
          }, {
            text: 'Cancel',
            role: 'cancel', // will always sort to be on the bottom
            handler: () => {
              console.log('Cancel clicked');
            }
          }
        ]
      });
    }

    async function presentScrollNoCancel() {
      await openActionSheet({
        buttons: [
          {
            text: 'Add Reaction',
            handler: () => {
              console.log('Add Reaction clicked');
            }
          }, {
            text: 'Copy Text',
            handler: () => {
              console.log('Copy Text clicked');
            }
          }, {
            text: 'Share Text',
            handler: () => {
              console.log('Share Text clicked');
            }
          }, {
            text: 'Copy Link to Message',
            handler: () => {
              console.log('Copy Link to Message clicked');
            }
          }, {
            text: 'Remind Me',
            handler: () => {
              console.log('Remind Me clicked');
            }
          }, {
            text: 'Pin File',
            handler: () => {
              console.log('Pin File clicked');
            }
          }, {
            text: 'Star File',
            handler: () => {
              console.log('Star File clicked');
            }
          }, {
            text: 'Mark Unread',
            handler: () => {
              console.log('Mark Unread clicked');
            }
          }, {
            text: 'Edit Title',
            handler: () => {
              console.log('Edit Title clicked');
            }
          }, {
            text: 'Save Image',
            handler: () => {
              console.log('Save Image clicked');
            }
          }, {
            text: 'Copy Image',
            handler: () => {
              console.log('Copy Image clicked');
            }
          }, {
            text: 'Delete File',
            role: 'destructive',
            handler: () => {
              console.log('Delete File clicked');
            }
          }
        ]
      });
    }
  </script>
</body>

</html>
